<template>
  <div class="member">
    <!-- 操作栏 -->
    <el-row type="flex" class="member-header" justify="end"/>

    <!-- 内容区域 -->
    <el-row :gutter="15" class="member-content">
      <el-col v-for="(list,index) in groupList" :key="index" :xs="24" :sm="12" :md="8" :lg="8">
        <div class="member-card complete clearfix" style="cursor:pointer;" @click="innerGroup(list.groupName)">
          <span class="groupname fl">{{ list.groupName }}</span>
          <span class="fr iconframe" @click.stop="toStar(index)">
            <svg-icon :icon-class="list.starIcon" class-name="icon-large" />
          </span>
          <span class="fr iconframe" @click.stop="modifySet(index)">
            <svg-icon icon-class="setter" class-name="icon-default" />
          </span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <div class="member-card" style="cursor:pointer;" @click="newGroup">
          <svg-icon icon-class="add_group" class-name="member-icon_add"/>
        </div>
      </el-col>
    </el-row>

    <!-- Dialog -->
    <el-dialog :visible.sync="dialogNewGroVisible" :before-close="beforDialogClose" title="新建小组">
      <el-tabs v-model="tabpane_Idx">
        <el-tab-pane name="first" label="小组设置">
          <div class="tabpane-content">
            <div class="tabpane-col">
              <label for="groupName" class="tabpane-col_desc">组名:</label>
              <el-input id="groupName" v-model="groupName" placeholder="请输入组名" class="tabpane-col_opera"/>
            </div>
            <div class="tabpane-col">
              <label class="tabpane-col_desc">图片:</label>
              <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                action="http://localhost:2333/file/upload"
                class="avatar-uploader tabpane-col_opera">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
                <div slot="tip" class="el-upload__tip">点击框框就可上传图片，只能上传jpg/png文件</div>
              </el-upload>
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="关联文件" name="second">
          <div class="tabpane-content">
            <div class="tabpane-col">
              <label for="folderName" class="tabpane-col_desc">文件名:</label>
              <el-input id="folderName" v-model="folderName" placeholder="请输入关联文件夹名字" class="tabpane-col_opera">
                <el-button slot="append" type="primary" @click="add_folder">添加</el-button>
              </el-input>
            </div>
            <div class="tabpane-col normal">
              <h3 class="folderlist-header">关联文件列表</h3>
              <el-card class="folderlist-body">
                <div v-for="item in groupItem.folders" :key="item" class="folder-item clearfix">
                  <span class="fl text-desc">{{ item.name }}</span>
                  <el-button class="fr" type="danger" plain size="mini" @click="del_folderItem(o)">删除</el-button>
                </div>
              </el-card>
            </div>
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="成员列表" name="third">
          <div class="tabpane-content">
            <div class="tabpane-col">
              <label for="folderName" class="tabpane-col_desc">成员账号:</label>
              <el-input id="folderName" v-model="username" placeholder="请输入成员账号名" class="tabpane-col_opera">
                <el-button slot="append" type="primary" @click="add_member">添加</el-button>
              </el-input>
            </div>
            <div class="tabpane-col normal">
              <h3 class="folderlist-header">成员列表</h3>
              <el-card class="folderlist-body position-r">
                <div v-for="item in groupItem.members" :key="item" class="folder-item clearfix">
                  <span class="fl text-desc">{{ item.name }}</span>
                  <span class="h-center text-desc">{{ item.username }}</span>
                  <el-button class="fr" type="danger" plain size="mini" @click="del_memberItem(o)">删除</el-button>
                </div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="isFromGrouped" label="其他设置" name="fouth">
          <el-button type="danger" icon="el-icon-delete" circle/>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewGroVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure_groupSet">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .el-col {
    margin-bottom: 15px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>

<script>
import './index.scss'
import { parseTime } from '../../utils/index'

export default {
  data() {
    return {
      // 小组列表
      groupList: [],
      // 新建小组 dialog显示状态
      dialogNewGroVisible: false,
      // 小组名字
      groupName: '猪年大吉',
      // 小组背景图
      imageUrl: '/src/assets/zhanwei_images/true.jpg',
      // 关联的文件夹名
      folderName: '',
      // 组员的账号
      username: '',
      // 组员列表
      members: [],
      // 小组子项(单一个实例)
      groupItem: {},
      // 是否通过已有的小组实例的设置(螺丝帽)进入
      isFromGrouped: false,
      // 标签页的初始展示页
      tabpane_Idx: 'first'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.$store.dispatch('GetGroupInfo', this.$store.state.user.username).then(groupList => {
        this.groupList = groupList.map(ele => {
        // 触发视图更新
          this.$set(ele, 'star', false)
          this.$set(ele, 'starIcon', 'star')
          return ele
        })
      })
    },
    // 初始化
    init(options = {}) {
      const {
        dialogNewGroVisible = false,
        isFromGrouped = false,
        groupItem = {},
        imageUrl = '/src/assets/zhanwei_images/true.jpg',
        groupName = ''
      } = options
      this.dialogNewGroVisible = dialogNewGroVisible
      this.isFromGrouped = isFromGrouped
      this.tabpane_Idx = 'first'
      this.groupItem = groupItem
      this.groupName = groupName
      this.imageUrl = imageUrl
    },
    // 新建小组
    newGroup() {
      this.init({
        dialogNewGroVisible: true
      })
    },
    // 上传成功后 预览图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      console.log(this.imageUrl)
    },
    // 小组背景图上传前 进行格式和大小验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 添加成员
    add_member() {
      this.$message({
        message: '222'
      })
      // members username
    },
    // 删除成员
    del_memberItem(item) {
      this.$message({
        message: item
      })
    },
    // 修改小组配置
    modifySet(index) {
      this.init({
        dialogNewGroVisible: true,
        groupName: this.groupList[index].groupName,
        imageUrl: this.groupList[index].imagepath,
        isFromGrouped: true,
        groupItem: this.groupList[index]
      })
    },
    // 关注
    toStar(index) {
      this.groupList[index].star = !this.groupList[index].star

      if (this.groupList[index].star === true) {
        this.$message({
          message: this.groupList[index].groupName + '关注成功',
          type: 'warning'
        })
        this.groupList[index].starIcon = 'star_active'
      } else {
        this.$message({
          message: this.groupList[index].groupName + '取消关注',
          type: 'warning'
        })
        this.groupList[index].starIcon = 'star'
      }
    },
    // 在dialog关闭之前
    beforDialogClose(done) {
      done()
      this.init()
    },
    // 进到组内部==> 显示小组共享文件
    innerGroup(groupName) {
      this.$router.push({ path: `/files/${groupName}` })
    },
    // 确认小组配置操作
    sure_groupSet() {
      // 当为新建组操作
      if (this.isFromGrouped === false) {
        const getItem = {
          groupName: this.groupName,
          imagePath: this.imageUrl,
          folders: [],
          members: [],
          setTime: parseTime(new Date()),
          creater: this.$store.state.user.name,
          username: this.$store.state.user.username
        }
        this.$store.dispatch('CreateGroup', getItem).then((msg) => {
          this.$message({
            message: msg,
            type: 'success'
          })
        }).catch(err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
        this.init({
          dialogNewGroVisible: false
        })
      } else { // 修改组配置操作
        this.$message({
          message: '修改文件夹',
          type: 'warning'
        })
      }
    }
  }
}
</script>

